<!--  -->
<template>
  <el-form :model="params"
           inline
           ref="dataForm"
           v-if="!showForm"
           :show-message="false"
           style="background:#F2F6FC;margin-left:0;padding:8px 0 ;width:100%;">
    <template v-for="(ruleItem,i) in showJson"
              :label="ruleItem.label">
      <el-form-item :key="i"
                    :rules="rules[ruleItem.fields]"
                    :prop="ruleItem.fields"
                    style="padding:0 0 0 15px;margin:0">
        <TypeInput v-if="ruleItem.type === 'input'"
                   :params='params'
                   :ruleItem='ruleItem' />
        <TypeInputNumber v-if="ruleItem.type === 'input-number'"
                         :params='params'
                         :ruleItem='ruleItem' />
        <TypeInputLine v-if="ruleItem.type === 'input-line'"
                       :params='params'
                       :ruleItem='ruleItem' />
        <TypeSelectApi v-if="ruleItem.type === 'select-api'"
                       :currIndex="paramsIndex"
                       :params='params'
                       :ruleItem='ruleItem' />
        <TypeSelectApiToomuch v-if="ruleItem.type === 'select-api-toomuch'"
                              :params='params'
                              :ruleItem='ruleItem' />
        <TypeSelectApiToomuchMultiple v-if="ruleItem.type === 'select-api-toomuch-multiple'"
            :params='params'
            :ruleItem='ruleItem' />
        <TypeSelectMoreApi v-if="ruleItem.type === 'select-more-api'"
                            :currIndex="paramsIndex"
                           :params='params'
                           :ruleItem='ruleItem' />
        <TypeSelectMoreApiAll v-if="ruleItem.type === 'select-more-api-all'"
                           :currIndex="paramsIndex"
                           :params='params'
                           :ruleItem='ruleItem' />
        <TypeSelectMoreApicascader v-if="ruleItem.type === 'select-more-cascader-api'"
                                   :params='params'
                                   :parentIndex="parentIndex"
                                   :currLabelIndex='i'
                                   :currIndex="paramsIndex"
                                   :ruleItem='ruleItem' />
        <TypeSelectMoreApicascaderAll v-if="ruleItem.type === 'select-more-cascader-api-all'"
                                   :params='params'
                                   :parentIndex="parentIndex"
                                   :currLabelIndex='i'
                                   :currIndex="paramsIndex"
                                   :ruleItem='ruleItem' />
        <TypeSelectApicascader v-if="ruleItem.type === 'select-cascader-api'"
                                   :params='params'
                                   :parentIndex="parentIndex"
                                   :currLabelIndex='i'
                                   :currIndex="paramsIndex"
                                   :ruleItem='ruleItem' />
        <TypeCustomInput v-if="ruleItem.type === 'custom-input'"
                                   :params='params'
                                   :parentIndex="parentIndex"
                                   :currLabelIndex='i'
                                   :currIndex="paramsIndex"
                                   :ruleItem='ruleItem' />
        <TypeText v-if="ruleItem.type === 'text'"
                  :params='params'
                  :ruleItem='ruleItem' />
        <TypeBoardStatus v-if="ruleItem.type === 'board-status'"
                         :params='params'
                         :ruleItem='ruleItem' />
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import TypeInput from './components/type-input'
import TypeInputLine from './components/type-input-line'
import TypeSelectApi from './components/type-select-api'
import TypeSelectApiToomuch from './components/type-select-toomuch'
import TypeSelectApiToomuchMultiple from './components/type-select-toomuch-multiple'
import TypeSelectMoreApi from './components/type-select-more-api'
import TypeSelectMoreApiAll from '@/components/next-ticket-render/components/type-select-more-api-all'
import TypeSelectMoreApicascader from './components/type-select-more-api-cascader'
import TypeSelectMoreApicascaderAll from './components/type-select-more-api-cascader-all'
import TypeSelectApicascader from './components/type-select-api-cascader'
import TypeCustomInput from './components/type-custom-input'
import TypeText from './components/type-text'
import TypeBoardStatus from './components/type-board-status'
import TypeInputNumber from './components/type-input-number'

export default {
  components: { TypeInput, TypeSelectApi, TypeSelectMoreApi, TypeSelectMoreApiAll, TypeText, TypeBoardStatus, TypeSelectApiToomuch, TypeSelectApiToomuchMultiple, TypeInputLine, TypeSelectMoreApicascader, TypeSelectMoreApicascaderAll, TypeSelectApicascader, TypeCustomInput, TypeInputNumber },
  props: {
    showJson: {
      type: Array,
      default: () => {
        return []
      }
    },
    params: {
      type: Object,
      default: () => { }
    },
    parentIndex: {
      type: Number
    },
    paramsIndex: {
      type: Number
    },
    enable: {
      type: Boolean
    }
  },
  data () {
    let rules = {}
    const { get } = this._
    this.showJson.forEach(element => {
      rules[element.fields] = [{ required: get(element, 'required', true), message: 'required', trigger: 'change' }]
    })
    return {
      formIndex: this.parentIndex,
      rules: rules
    }
  },
  computed: {
    showForm () {
      return JSON.stringify(this.rules) === '{}'
    }
  },
  mounted () {
    this.clearValidates()
  },
  methods: {
    validateRules () {
      let result
      this.$refs['dataForm'].validate((valid) => {
        if (valid) result = true
        else result = false
      })
      return result
    },
    clearValidates () {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    }
  }
}
</script>
<style scoped>
form {
  width: 100%;
}
</style>
